<template>
	<view class="columnbox wdh-100 content" v-if="info!=''">
		<view class="columnbox store-info">
			<view class="rowbox wdh-100 als">
				<image mode="aspectFill" class="store-img" :src="info.img">
				</image>
				<view class="columnbox als store-detail">
					<view class="rowbox wdh-100 spb">
						<view class="store-name rowbox">{{info.stationName}} <u-icon color="#212121" size="28rpx"
								name="arrow-right" style="margin-left: 10rpx;"></u-icon></view>
						<view class="order-status" v-if="info.orderStatus==0">进行中</view>
						<view class="order-status" style="color: #616161;" v-else-if="info.orderStatus==1">已完成
						</view>
					</view>
					<!-- <view class="order-type">服务项目：{{getType(info.washType)}}</view> -->
				</view>
			</view>
			<view class="rowbox wdh-100 order-price" style="justify-content: flex-start;margin-top: 26rpx;">
				实付款 ¥<text style="font-size: 40rpx;" v-if="washOrderOverPayVo&&washOrderOverPayVo.overDurationFee">
					{{(washOrderDoorPayVo.payCash*1+washOrderOverPayVo.overDurationFee*1).toFixed(2)}}</text>
				<text style="font-size: 40rpx;" v-else>
					{{washOrderDoorPayVo.payCash}}</text>
			</view>
			<view class="wdh-100 rowbox order-btn spb" v-if="info.orderStatus==0">
				<view v-if="info.overTime>0" style="color: #BD3124;font-size: 28rpx;">已超时{{info.overTime}}分钟
					超时费￥{{info.overTimeFree}}</view>
				<view v-else></view>
				<!-- <view @click="endOrder" class="rowbox btn-one">结束订单</view> -->
			</view>
		</view>
		<view class="info-title">订单信息</view>
		<view class="columnbox store-info">
			<view class="rowbox wdh-100 spb one-info">
				<view class="order-title">订单编号</view>
				<view style="font-size: 24rpx;">{{id}}</view>
			</view>
			<view class="rowbox wdh-100 spb one-info">
				<view class="order-title">开始时间</view>
				<view>{{info.beginTime}}</view>
			</view>
			<view class="rowbox wdh-100 spb one-info">
				<view class="order-title">结束时间</view>
				<view>{{info.endTime||'-'}}</view>
			</view>
			<view class="rowbox wdh-100 spb one-info">
				<view class="order-title">洗车时长</view>
				<view>{{info.washDuration||'-'}}分钟</view>
			</view>
			<view class="rowbox wdh-100 spb one-info">
				<view class="order-title">洗车车间</view>
				<view>{{info.doorName}}</view>
			</view>
		</view>
		<view class="columnbox store-info">
			<view class="rowbox wdh-100 spb one-info">
				<view class="order-title">支付时间</view>
				<view>{{washOrderDoorPayVo.payTime||'-'}}</view>
			</view>
			<view class="rowbox wdh-100 spb one-info">
				<view class="order-title">支付方式</view>
				<view>{{washOrderDoorPayVo.payOrderType}}</view>
			</view>
			<view class="rowbox wdh-100 spb one-info" v-if="info.prePayOrderType!=1">
				<view class="order-title">支付金额</view>
				<view>¥{{washOrderDoorPayVo.payCash||'-'}}</view>
			</view>
			<template v-if="info.overTime>0&&info.orderStatus==1">
				<view class="info-title" style="border-top: #EFEFEF solid 1px;padding: 20rpx 0;">超时费用</view>
				<view class="rowbox wdh-100 spb one-info">
					<view class="order-title">超时时间</view>
					<view>{{info.overTime}}分钟</view>
				</view>
				<view class="rowbox wdh-100 spb one-info">
					<view class="order-title">支付时间</view>
					<view>{{info.payTime}}</view>
				</view>
				<view class="rowbox wdh-100 spb one-info">
					<view class="order-title">支付方式</view>
					<view>{{getPayType(info.overPayOrderType)}}</view>
				</view>
				<view class="rowbox wdh-100 spb one-info" v-if="info.overPayOrderType!=1">
					<view class="order-title">支付金额</view>
					<view>{{info.overTimeFree}}元</view>
				</view>
			</template>
		</view>
		<template v-if="washOrderOverPayVo">
			<view class="info-title">超时费用</view>
			<view class="columnbox store-info" style="margin-bottom: 20rpx;">
				<view class="rowbox wdh-100 spb one-info">
					<view class="order-title">超时时间</view>
					<view style="font-size: 24rpx;">{{washOrderOverPayVo.overDuration}}分钟</view>
				</view>
				<view class="rowbox wdh-100 spb one-info">
					<view class="order-title">超时费用</view>
					<view>{{washOrderOverPayVo.overDurationFee}}元</view>
				</view>
				<view class="rowbox wdh-100 spb one-info">
					<view class="order-title">支付时间</view>
					<view>{{washOrderOverPayVo.overPayTime||'-'}}</view>
				</view>
				<view class="rowbox wdh-100 spb one-info">
					<view class="order-title">支付方式</view>
					<view>{{washOrderOverPayVo.overPayType||'-'}}</view>
				</view>
			</view>
		</template>
		<!-- 	<view class="rowbox r-box">
			<view></view>
			猜你喜欢
			<view></view>
		</view>
		<view class="wdh-100 s-list">
			<view class="coupon-box one-store" v-for="(item,index) in 20" :key='index'>
				<image mode="aspectFill" class="store-img"
					src="https://img0.baidu.com/it/u=1107695420,655968989&fm=253&fmt=auto&app=138&f=JPEG?w=785&h=500">
				</image>
				<view class="s-title wdh-100 textovflow">兄弟洗车.洗车券</view>
				<view class="rowbox wdh-100 spb" style="margin-bottom: 20rpx;">
					<view class="s-price">¥20</view>
					<view class="dh-btn">立即购买</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				info: '',
				washOrderDoorPayVo: null,
				washOrderOverPayVo: null
			};
		},
		onLoad(options) {
			this.id = options.id
			this.getDetail()
		},
		methods: {
			getPayType(v) {
				switch (v) {
					case 0:
						return '充值'
						break;
					case 1:
						return '洗车券支付'
						break;
					case 2:
						return '零钱支付'
						break;
					case 3:
						return '订单充值'
						break;

				}
			},
			endOrder() {
				if (this.submitflag) {
					return
				}
				this.submitflag = true
				uni.showModal({
					title: '是否确认结束订单',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '加载中'
							})
							let id = this.id
							this.$req.put(`/xcx/washOrder/finish/${id}/`).then(res => {
								if (res.data.code == 200) {
									uni.hideLoading()
									this.submitflag = false
									uni.showToast({
										title: '订单已结束',
										icon: 'success'
									})
									this.getDetail()
									let pages = getCurrentPages(); //获取所有页面栈实例列表
									let nowPage = pages[pages.length - 1]; //当前页页面实例
									let prevPage = pages[pages.length - 2];
									prevPage.$vm.refreshflag = true
								} else if (res.data.code == 701) {
									this.$req.post('/pay/overTime', {
										orderId: this.id
									}).then(res => {
										uni.hideLoading()
										this.submitflag = false
										var info = res.data.data
										uni.requestPayment({
											provider: 'wxpay',
											timeStamp: info.timeStamp + '',
											nonceStr: info.nonceStr,
											package: info.packages,
											signType: info.signType,
											paySign: info.paySign,
											success: res => {
												uni.showToast({
													title: '支付成功'
												})
												this.getDetail()
												let pages =
													getCurrentPages(); //获取所有页面栈实例列表
												let nowPage = pages[pages.length -
													1]; //当前页页面实例
												let prevPage = pages[pages.length -
													2];
												prevPage.$vm.refreshflag = true
											},
											fail: function(err) {
												console.log('fail:' + JSON
													.stringify(err));
											},
											complete() {
												this.submitflag = false
												uni.hideLoading()
											}
										});
									})
								} else {
									uni.hideLoading()
									this.submitflag = false
									uni.showModal({
										title: '操作失败',
										content: res.data.msg
									})
								}
							})
						} else {
							this.submitflag = false
						}
					}
				})
			},
			getType(v) {
				switch (v) {
					case 0:
						return '全自动精洗'
						break;
					case 1:
						return '全自助洗车'
						break;
					case 2:
						return '人工普洗'
						break;
					case 3:
						return '人工精洗'
						break;
					default:
						return '深度精洗'
						break
				}
			},
			getDetail() {
				let id = this.id
				this.$req.get(`/xcx/manager/count/washOrder/${id}`).then(res => {
					res.data.data.washOrderDoorVo.img = JSON.parse(res.data.data.washOrderDoorVo.listUrl)[0].url
					this.info = res.data.data.washOrderDoorVo
					this.washOrderDoorPayVo = res.data.data.washOrderDoorPayVo
					this.washOrderOverPayVo = res.data.data.washOrderOverPayVo
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background: #f7f8fa;
		min-height: 100vh;
		justify-content: flex-start;
		font-family: PingFang SC;
		width: 100%;
		overflow: hidden;
	}

	.store-info {
		width: 710rpx;
		margin-top: 20rpx;
		background: #fff;
		padding: 20rpx 20rpx;
		border-radius: 20rpx;
	}

	.store-img {
		width: 170rpx;
		height: 120rpx;
		border-radius: 10rpx;
	}

	.store-detail {
		margin-left: 20rpx;
		width: calc(100% - 190rpx);

		.store-name {
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 28rpx;
			color: #000000;
		}

		.order-status {
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 24rpx;
			color: #FF672D;
		}

		.order-type {
			background-color: rgba(56, 148, 254, 0.1);
			color: #1E72CA;
			font-size: 24rpx;
			line-height: 24rpx;
			padding: 10rpx 20rpx;
			border-radius: 10rpx;
			margin-top: 20rpx;
		}
	}

	.order-price {
		font-size: 28rpx;
		font-weight: bold;
	}

	.order-btn {
		margin-top: 20rpx;
	}

	.btn-one {
		background: #126BC9;
		color: #fff;
		font-size: 28rpx;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
		line-height: 40rpx;
	}

	.fp-btn {
		background: #fff;
		background: rgba(18, 107, 201, 0.1);
		border-radius: 12rpx;
		border: 2rpx #17698F solid;
		color: #17698F;
	}

	.rebuy-btn {
		background: #fff;
		color: #17698F;
		border: #17698F solid 1px;
	}

	.one-info {
		padding: 20rpx 0;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #212121;
	}

	.info-title {
		font-size: 32rpx;
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		margin-top: 36rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 32rpx;
		color: #000000;
	}

	.order-title {
		font-family: PingFang SC, PingFang SC;
		font-size: 24rpx;
		color: #72778A;
	}

	.r-box {
		font-size: 32rpx;
		font-weight: bold;
		margin: 40rpx 0;

		view {
			background: #BBBBBB;
			width: 100rpx;
			height: 4rpx;
			margin: 0 40rpx;
		}
	}

	.s-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 20rpx;
		padding: 0 20rpx;
		box-sizing: border-box;

		.one-store {
			border-radius: 20rpx;
			width: 339rpx;
			background: #fff;
			overflow: hidden;
			margin-bottom: 20rpx;

			.store-img {
				border-radius: 20rpx;
				width: 100%;
				height: 220rpx;
			}
		}

		.s-title {
			font-size: 32rpx;
			padding: 10rpx 20rpx;
		}

		.s-price {
			color: #BD3124;
			font-size: 28rpx;
			margin-left: 20rpx;
		}

		.dh-btn {
			background: #17698F;
			color: #fff;
			font-size: 24rpx;
			padding: 10rpx 20rpx;
			line-height: 24rpx;
			margin-right: 20rpx;
			border-radius: 10rpx;
		}
	}
</style>